<template>
	<view class="">
		<view class="test" v-for="(item, index) in testData" :key="index" v-if="item.orderNo == activeNum">
			<view class="test_hearder">
				<view class="test_type">
					<text class="type">{{item.type}}</text>
				</view>
				<view class="item_title">
					<text>{{activeNum + '.' + item.title}}</text>
				</view>
			</view>
			<view @click="selectData(item.id, i.item, idx, item.type)"
				:class="['test_item', isA === idx ? 'active' : '',  active.includes(i.item) ? 'active' : '', answer === i.item ? 'active' : '']"
				v-for="(i, idx) in item.itemList" :key="idx">
				<text>{{ option[idx]  + ' '+ i.item}}</text>
			</view>
			<view class="tips" v-if="tipsFlag">
				<text>正确答案: </text>
				<text class="tips_content">
					{{ ' '+item.ideas}}
				</text>
			</view>
		</view>
<!-- 		<view class="submitImg">
			<button type="primary" @click="submitTset">提交</button>
		</view> -->
		<view class="test_bottom">
			<button :disabled="activeNum === 1" type="default" @click="last">上一题</button>
			<button :disabled="activeNum === testData.length" type="default" @click="next">下一题</button>
			<!-- <button v-if="!ifNext" type="primary" @click="submit">提交</button> -->
		</view>
		<uni-popup ref="nextPopup" type="dialog">
			<uni-popup-dialog title="" content="本题尚未答题是否下一题?" :before-close="true" @close="close" @confirm="confirm">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeNum: 1,
				option: ['A.', 'B.', 'C.', 'D.'],
				isA: null,
				active: [],
				onlyActive: [],
				ifNext: false,
				reverseData: [],
				select: [],
				onlySelect: [],
				tipsFlag: false,
				answer: '',
				isAnswer: false
			}
		},
		props: {
			testData: Array,
			title: String
		},
		created() {
			this.select = uni.getStorageSync('selectData') || []
			var item = this.testData[this.activeNum-1]
			this.bianli(this.select, item.id)
		},
		onLoad() {
		},
		methods: {
			close() {
				this.$refs.nextPopup.close()
			},
			confirm() {
				this.activeNum++
				this.tipsFlag = false
				this.isA = null
				var item = this.testData[this.activeNum-1]
				if (item.type === '判断题') {
					this.select = uni.getStorageSync('selectData')
					// console.log(this.select)
					this.bianli(this.select, item.id)
				}
				if (item.type === '单选题') {
					this.onlySelect = uni.getStorageSync('onlySelectData')
					this.bianli(this.onlySelect, item.id)
				}
				this.$refs.nextPopup.close()
			},
			selectData(id, item, index, type) {
				if (this.title === '章节练习') {
					this.tipsFlag = true
				}
				switch (type) {
					case '单选题':
						this.isA = index;
						this.onlyActive.unshift({
							questionId: id,
							answer: item,
							index: index
						})
						let onlyObj = {};
						this.onlySelect = this.onlyActive.reduce((cur, next) => {
							onlyObj[next.questionId] ? "" : onlyObj[next.questionId] = true && cur.push(next);
							return cur;
						}, [])
						console.log(JSON.stringify( this.onlySelect))
						uni.setStorageSync(
						'onlySelectData',
						this.onlySelect
						)
						var item = this.testData[this.activeNum-1]
						this.bianli(this.onlySelect, item.id)
						break;
					case '判断题':
						this.isA = index;
						if (uni.getStorageSync('selectData').length !== 0) {
							this.active = uni.getStorageSync('selectData')
						}
						this.active.unshift({
							questionId: id,
							answer: item,
							index: index
						})
						let obj = {};
						this.select = this.active.reduce((cur, next) => {
							obj[next.questionId] ? "" : obj[next.questionId] = true && cur.push(next);
							return cur;
						}, [])
						uni.setStorageSync(
						'selectData',
						this.select
						)
						var item = this.testData[this.activeNum-1]
						this.bianli(this.select, item.id)
						break;
					case '多选题':
						this.active.push(item)
						var arr2 = []
						for (var i = 0; i < this.active.length; i++) {
							if (arr2.indexOf(this.active[i]) < 0) {
								arr2.push(this.active[i]);
							} else {
								arr2 = arr2.filter((items) => {
									return items !== item
								})
							}
						}
						this.active = arr2
						item = this.active
						break;
					default:
						break;
				}
				this.$emit('select-data', {
					questionId: id,
					answer: item,
					index: index
				})
			},
			next() {
				let nowItem = this.testData[this.activeNum - 1]
				if (this.nextFlag(nowItem.id, nowItem.type).length === 0 || !this.nextFlag(nowItem.id, nowItem.type)) {
					// 说明没有选择   弹出对话框
					this.$refs.nextPopup.open()
					return
				}
				this.activeNum++
				this.tipsFlag = false
				this.isA = null
				var item = this.testData[this.activeNum-1]
				if (item.type === '判断题') {
					this.select = uni.getStorageSync('selectData')
					// console.log(this.select)
					this.bianli(this.select, item.id)
				}
				if (item.type === '单选题') {
					this.onlySelect = uni.getStorageSync('onlySelectData')
					this.bianli(this.onlySelect, item.id)
				}
			},
			nextFlag(id, type) {
				if(type === '判断题') {
					if (this.select.length === 0) {
						return false;
					}
					return this.select.filter((ele, index) => {
						return ele.questionId === id
					})
				} else {
					if (this.onlySelect.length === 0) {
						return false;
					}
					return this.onlySelect.filter((ele, index) => {
						return ele.questionId === id
					})
				}
			},
			last() {
				this.activeNum--
				this.tipsFlag = false
				this.isA = null
				var item = this.testData[this.activeNum-1]
				
				console.log(item)
				if (item.type === '判断题') {
					this.select = uni.getStorageSync('selectData')
					this.bianli(this.select, item.id)
				}
				if (item.type === '单选题') {
					this.onlySelect = uni.getStorageSync('onlySelectData')
					this.bianli(this.onlySelect, item.id)
				}
			},
			// delItem (arr) {
			// },
			// submitTset() {
			// 	this.$emit('submitTest')
			// },
			bianli (data, id) {
				if (data.length === 0) {
					return
				}
				var answer = data.filter((item) => {
					if (item.questionId === id) {
						return item.questionId
					}
				})
				if (answer.length === 0) {
					this.answer = ''
				} else {
					this.answer = answer[0].answer
				}
				// console.log(this.answer)
			}
		}
	}
</script>

<style lang="scss">
	.test {
		width: 650rpx;
		margin: 20px auto 0;

		.test_hearder {
			width: 100%;
			margin-bottom: 40px;

			.test_type {
				width: 100%;
				height: 30px;
				margin-bottom: 10px;
				position: relative;

				.type {
					position: absolute;
					top: 2px;
					margin-left: 5px;
					font-size: 20px;
					color: #3C86FD;
				}
			}

			.item_title {
				word-wrap: break-word;
				width: 100%;
			}
		}

		.test_item {
			line-height: 25px;
			display: inline-block;
			word-wrap: break-word;
			margin: 0px 10px 10px 0;
			margin-left: -10px;
			width: 100%;
			padding: 10px;
			border: 1px solid #ccc;
			border-radius: 10px;

			text {
				font-size: 14px;
			}
		}
	}

	.test_bottom {
		width: 750rpx;
		height: 100rpx;
		position: absolute;
		bottom: 0;

		button {
			background-color: #fff;
			width: 50%;
			float: left;
			color: #3C86FD;
		}

		button[disabled] {
			color: #eee;
		}
	}

	.submitImg {
		position: absolute;
		width: 150px;
		height: 40px;
		right: 8px;
		bottom: 80px;

		button {
			line-height: 40px;
			width: 100%;
			height: 100%;
		}
	}

	.tips {
		margin-top: 20px;
		margin-left: 50%;
		transform: translateX(-50%);
		width: 650rpx;

		.tips_content {
			word-wrap: break-word;
		}
	}

	.active {
		background-color: #3C86FD;
		color: #fff;
	}
</style>
